<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: rgb(226, 226, 226);
        }

        .d1 {
            width: 1305px;
            height: 710px;
            background-color: aqua;
            margin: auto;
        }

        .left {
            width: 170px;
            height: 655px;
            background-color: beige;
            float: left;
        }

        .tx {
            width: 170px;
            height: 170px;
            background-color: rgb(36, 52, 67);
            float: left;
        }

        .dhl {
            width: 170px;
            height: 540px;
            background-color: rgb(47, 64, 80);
            line-height: 50px;
            text-align: center;
            color: rgb(235, 235, 235);
            font-size: 14px;
            float: left;

            div {
                margin: 10px 0;
            }
        }

        .data_top {
            height: 50px;
            width: 1135px;
            background-color: rgb(255, 255, 255);
        }

        .p1 {
            font-size: 12px;
            color: rgb(50, 50, 240);
            height: 30px;
            line-height: 30px;
            margin: 10px;
            padding: 0 20px;
            background-color: rgb(255, 255, 255);
        }

        .p1 span {
            color: rgb(165, 165, 165);
        }

        table {
            width: 1090px;
            height: 420px;
            margin: auto;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid rgb(222, 222, 222);
            text-align: center;
            padding: 2px;
            color: rgb(65, 65, 65);
        }

        .gl {
            width: 1115px;
            /* height: 460px; */
            /* margin: auto; */
            /* overflow-y: auto; */
            margin: 10px;
            /* padding: 0 20px; */
            background-color: rgb(255, 255, 255);
            float: left;
        }

        .data {
            float: left;
            height: 710px;
            background-color: rgb(244, 246, 248);
        }

        .xg {
            width: 280px;
            height: 180px;
            background-color: white;
            float: left;
            margin: 140px 417px;
            display: none;
            color: rgb(117, 122, 134);

            button {
                margin: 0 48px;
                background-color: rgb(92, 184, 92);
                border: none;
                color: rgb(247, 252, 246)
            }
        }

        .tj {
            width: 260px;
            height: 290px;
            background-color: rgb(255, 255, 255);
            float: left;
            margin: 85px 427px;
            display: none;
        }

        .tj button {
            margin: 0 43px;
        }

        .inp {
            float: right;
        }

        .inp1 {
            margin-left: 70px;
        }

        .inp2 {
            margin-left: 70px;
        }

        .s1 {
            margin-left: 20px;
        }

        .tx1 {
            width: 100px;
            height: 100px;
            float: left;
            margin: 15px 35px;
        }

        .tx1 img {
            width: 100px;
            height: 100px;
        }

        .tx1 p {
            text-align: center;
        }

        .pagination {
            display: flex;
            list-style: none;
            padding: 0;
        }

        .pagination li {
            margin: 0 5px;
            cursor: pointer;
        }

        .active {
            font-weight: bold;
            color: red;
        }

        .grzx {
            display: none;
        }

        td button {
            margin: 5px
        }

        table {
            margin: 12px
        }

        #tj {
            float: right;
            margin: 10px 15px;
        }

        .tjkj {
            height: 50px;
            margin: 10px;
            padding: 0 20px;
            background-color: rgb(255, 255, 255);

            button {
                width: 80px;
                height: 30px;
                background-color: rgb(92, 184, 92);
                color: rgb(228, 248, 234);
                border: none;
            }
        }

        .sskj {
            height: 50px;
            background-color: rgb(255, 255, 255);

            button {
                height: 30px;
                border: none;
                background-color: rgb(92, 184, 92);
                color: rgb(228, 248, 234);
            }

            input {
                border: 1px solid rgb(214, 214, 214);
                margin: 10px 0;
                height: 25px;
                margin-left: 10px;
            }
        }

        #pagination button {
            background-color: rgb(92, 184, 92);
            border: none;
            color: rgb(228, 248, 234)
        }

        #pagination div {
            width: 143px;
            margin: 10px auto;
        }

        .btn1 {
            background-color: rgb(91, 192, 222);
            border: none;
            color: rgb(247, 250, 252)
        }

        .btn2 {
            background-color: rgb(240, 173, 78);
            border: none;
            color: rgb(247, 250, 252)
        }

        .b {
            display: none;
        }
        .show {
            display: block;
        }
        .shom {
            background-color: rgb(36, 52, 67);
        }

        .xgkj {
            width: 1115px;
            height: 460px;
            background-color: rgb(255, 255, 255);
            margin: 10px;
        }

        .tx1 p {
            color: rgb(167, 175, 186);
        }

        .data_top h3 {
            display: inline-block;
            margin: 10px 20px;
        }

        #p1 {
            margin-left: 790px;
            display: inline-block;
            font-size: 14px;
            color: rgb(51, 122, 183);
        }

        #p2 {
            margin-left: 20px;
            display: inline-block;
            font-size: 14px;
            color: rgb(51, 122, 183);
        }

        .grzx span {
            font-size: 14px;
            color: rgb(51, 160, 218)
        }
        .xx{
            width: 440px;
            height: 600px;
            margin: auto;
        }
        .grzx ul div{
            display: inline-block;
            width: 75px;
            height: 10px;
            margin-right: 40px;
        }
        .grzx li{
            margin: 20px;
            list-style: none;
        }
        .grzx img {
            width: 100px;
            height: 100px;
        }
        .xx h3{
            text-align: center;
        }
        .grkj{
            width: 1115px;
            height: 590px;
            background-color: rgb(255, 255, 255);
            margin: 10px;
        }
        .p3{
            margin-left: 20px;
        }
        .cc{
            width: 440px;
            height: 600px;
            margin: auto;
            display: none;
        }
        .cc h3{
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="d1">
        <div class="left">
            <div class="tx">
                <div class="tx1">
                    <img src="https://c-ssl.duitang.com/uploads/item/202008/18/20200818183824_HcHJZ.jpeg" alt="">
                    <p></p>
                </div>
            </div>
            <div class="dhl">
                <div class="a c a1 shom"><span>讲师管理</span></div>
                <div class="a c"><span>仪表盘</span></div>
            </div>
        </div>
        <div class="data">
            <div class="data_top">
                <h3>讲师管理系统</h3>
                <p id="p1"><span class="a gr" onclick="xrgr()">个人中心</span></p>
                <p id="p2" onclick="tc()">退出</p>
            </div>
            <div class="b show">
                <div class="p1">讲师管理<span> / 讲师列表</span></div>
                <div class="tjkj"><button onclick="add()" id="tj">添加讲师</button></div>
                <div class="gl">
                    <div class="sskj"><input type="text" class="ss"><button onclick="ss()">搜索</button></div>
                    <!-- <button onclick="cksy()">查看所有讲师</button> -->
                    <!-- <button onclick="gggg()">查看所有讲师</button> -->
                    <table border="1">
                        <thead>
                            <tr>
                                <td>编号</td>
                                <td>姓名</td>
                                <td>昵称</td>
                                <td>出生日期</td>
                                <td>性别</td>
                                <td>手机号码</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody id="data-list">

                        </tbody>
                    </table>
                    <div id="pagination">
                        <div>
                            <button onclick="fetchData(currentPage - 1)">上一页</button>
                            <span id="current-page">1</span> / <span id="total-pages">1</span>
                            <button onclick="fetchData(currentPage + 1)">下一页</button>
                        </div>
                    </div>
                </div>
                <div class="xgkj">
                    <div class="xg">
                        <p>姓名<input type="text" class="inp"></p>
                        <p>出生日期<input type="text" class="inp"></p>
                        <p>性别<input type="radio" name="sex" value="0" class="inp1">男<input type="radio" name="sex"
                                value="1" class="inp1">女</p>
                        <button onclick="qxbj()">取消</button><button onclick="bj()">编辑</button>
                    </div>
                    <div class="tj">
                        <p>姓名<input type="text" class="inp"></p>
                        <p>昵称<input type="text" class="inp"></p>
                        <p>生日<input type="text" class="inp"></p>
                        <p>手机号<input type="text" class="inp"></p>
                        <p>讲师类型<select class="s1">
                                <option value="1">讲师</option>
                                <option value="2">班主任</option>
                            </select></p>
                        <p>性别<input type="radio" name="sex1" value="0" class="inp2">男<input type="radio" name="sex1"
                                value="1" class="inp2">女</p>
                        <button onclick="qxtj()">取消</button><button onclick="add1()">添加</button>
                    </div>
                </div>
            </div>
            <div class="b">
                <div id="main" style="width: 600px;height:400px;"></div>
            </div>
            <div class="b grzx">
                <p><span onclick="grfh()" class="p3">返回</span><span class="p3" onclick="bjxx()">编辑</span></p>
                <div class="grkj">
                    <div class="xx">
                        <h3>个人信息</h3>
                    </div>
                    <div class="cc">
                        <h3>修改</h3>
                        <ul>
                            <li><div>姓名</div><input type="text"></li>
                            <li><div>头像</div><input type="text"></li>
                            <li><div>昵称</div><input type="text"></li>
                            <li><div>性别</div><input type="text"></li>
                            <li><div>出生日期</div><input type="text"></li>
                            <li><div>籍贯</div><input type="text"></li>
                            <li><div>手机号码</div><input type="text"></li>
                            <li><div>电子邮箱</div><input type="text"></li>
                            <li><div>入职日期</div><input type="text"></li>
                            <li><div>个人介绍</div><input type="text"></li>
                        </ul>
                        <button onclick="tjxx()">修改</button><button onclick="qxxg()">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./jq.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <script src="./首页.js"></script>
</body>

</html>